<template>
  <!-- <div v-if="!routee" class="big_box">
    <div class="b_box">
      <div class="header_a">
        <span>状态</span><span>房型</span>
        <el-button type="primary" link style="margin-left: 740px;">添加房型</el-button>
      </div>
      <div class="body_a">
        <div v-for="item in roomData" :key="item.number">
          <div
            :class="{ box_s: item.zt == '空闲中', box_t: item.zt == '预定中', box_r: item.zt == '维修中', box_x: item.zt == '清洁中', box_y: item.zt == '入住中' }"
            v-if="item.louceng == prev.innerText[0]">
            <div class="zs">{{ item.number }}</div>
            <div class="ys">{{ item.r_kind }}</div>
            <div class="zx">{{ item.zt }}</div>
            <div class="yx">{{ item.data }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="louceng">
      <div class="text">楼层</div>
      <ul class="num_louceng" @click="clickHandler" ref="ul">
        <li v-for="i in 4" :key="i">{{ i }}F</li>
      </ul>
    </div>
  </div> -->
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
// import { getRoomsKind } from '../../api/roomApi'
// export default {
//   async created() {
//     await this.getData()
//   },
//   mounted() {
//     this.prev = this.$refs.ul.children[0]
//   },
//   data() {
//     return {
//       routee: '',
//       roomData: [],
//       prev: '',
//       lc: '',
//     }
//   },
//   methods: {
//     async getData() {
//       let ret = await getRoomsKind()
//       this.roomData = ret.results
//     },
//     clickHandler($evt) {
//       Array.from(this.$refs.ul.children).forEach(item => {
//         if (item == $evt.target) {
//           this.prev = item
//         }
//       })
//     }
//   },
//   watch: {
//     '$route'() {
//       this.routee = location.hash.slice(2).includes('/')
//     },
//     prev() {
//       Array.from(this.$refs.ul.children).forEach(item =>
//         item == this.prev ? item.style.background = '#C9DAFF' :
//           item.style.background = 'transparent'
//       )
//     }
//   }
// }
</script>

<style lang="scss" scoped>
// .header_a {
//   height: 50px;
//   width: 100%;
//   border-bottom: 1px solid black;

//   span {
//     display: inline-block;
//     width: 100px;
//     height: 50px;
//     line-height: 50px;
//     text-align: center;
//   }
// }

// .big_box {
//   width: 100%;
//   height: 89%;
// }

// .b_box {
//   width: 1075px;
//   background: #FFFFFF;
//   border-radius: 3px;
//   float: left;
// }

// .louceng {
//   width: 50px;
//   height: 400px;
//   background-color: #FFF;
//   margin-left: 40px;
//   float: left;

//   .text {
//     width: 50px;
//     height: 50px;
//     line-height: 50px;
//     text-align: center;
//   }

//   ul {
//     margin: 0;
//     padding: 0;

//     li {
//       width: 50px;
//       height: 50px;
//       border-radius: 6px;
//       line-height: 50px;
//       text-align: center;
//     }
//   }

// }

// .body_a {
//   padding: 20px 15px;
//   width: 1000px;
//   display: flex;
//   flex-wrap: wrap;

//   .box_s {
//     width: 150px;
//     height: 90px;
//     background: #8EAFFA;
//     border-radius: 3px;
//     margin: 25px;
//     color: #FFF;
//   }

//   .box_t {
//     width: 144px;
//     height: 84px;
//     background: #FFF;
//     border-radius: 3px;
//     margin: 25px;
//     color: #8EAFFA;
//     border: 3px solid #8EAFFA;
//   }

//   .box_r {
//     width: 150px;
//     height: 90px;
//     background: rgba(255, 195, 135, 0.61);
//     ;
//     border-radius: 3px;
//     margin: 25px;
//     color: #A39B93;
//     ;
//   }

//   .box_x {
//     width: 150px;
//     height: 90px;
//     background: #8ADE8E;
//     border-radius: 3px;
//     margin: 25px;
//     color: #FFF;
//   }

//   .box_y {
//     width: 144px;
//     height: 84px;
//     background: #FFF;
//     border-radius: 3px;
//     margin: 25px;
//     color: #F08F2E;
//     border: 3px solid #FFC387;
//   }

//   .zs {
//     width: 65px;
//     height: 27px;
//     float: left;
//     padding: 5px;
//   }

//   .ys {
//     width: 59px;
//     height: 35px;
//     float: left;
//     padding: 5px;
//     text-align: right;
//   }

//   .zx {
//     width: 65px;
//     height: 35px;
//     float: left;
//     padding: 5px;
//     line-height: 38px;
//   }

//   .yx {
//     width: 59px;
//     height: 35px;
//     float: left;
//     padding: 5px;
//     text-align: right;
//     line-height: 38px;
//   }
// }
</style>